<!-- 
  适配后台的commonSelect组件，树形结构

  用法：
    <common-select
      v-model="visible"
      selectKey="selectDepartmentOrPosition"
      selectMode="1"
      header="测试"
      @success="selectDone"
    ></common-select>

    selectDone(rows) {
      console.log(rows);
    },

  说明：
    v-model：绑定一个boolean值，用来显示或隐藏commonselect；
    selectKey：后台commonSelect配置文件里的指定的section的id值；
    selectMode：单选还是多选，0 单选，1 多选；
    @success：commonSelect选择之后的触发的事件，传一个参数rows，表示选中的记录

-->
<template>
  <vxe-modal
    ref="commonSelectModal"
    v-model="visible"
    :resize="true"
    width="1024"
    height="600"
    :title="models.section.name"
    :show-zoom="true"
    :destroy-on-close="true"
    :showFooter="true"
    @close="cancel"
  >
    <div class="common-select-container">
      <qm-table
        ref="qmTable"
        :data="{ data: treeData }"
        :showMenu="false"
        :showToolbar="false"
        :showOrder="false"
        :showCheckbox="multiple"
        :showRadio="!multiple"
        :options="calOptions"
        :showPager="false"
      >
        <qm-table-column field="text" tree-node>
          {{ header }}
          <template v-slot:content="{ row }">
            <span>
              <template v-if="row.children">
                <i
                  class="tree-node-icon fa"
                  :class="$refs.qmTable.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"
                ></i>
              </template>
              <template v-else>
                <i class="tree-node-icon fa fa-file-o"></i>
              </template>
              <span>{{ row.text }}</span>
            </span>
          </template>
        </qm-table-column>
      </qm-table>
    </div>

    <template v-slot:footer>
      <el-row>
        <el-col :span="24" style="text-align: right;">
          <el-button type="primary" @click="returnResult">确定</el-button>
          <el-button type="info" @click="cancel">关闭</el-button>
        </el-col>
      </el-row>
    </template>
  </vxe-modal>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";

export default {
  name: "common-select-tree",
  props: {
    // commonSelect 配置文件的 section 标签的 id
    selectKey: {
      type: String,
      required: true,
    },
    // 0 单选，1 多选
    selectMode: {
      type: Number | String,
      default: "0",
    },
    value: Boolean,
    header: {
      type: String, 
      default: '名称'
    }
  },
  data() {
    return {
      treeData: [],
      models: {
        treeData: [],
        section: {},
        selectMode: "0",
      },
      search: {},
      controlData: {
        dataTitle: "",
      },
      visible: false,
    };
  },
  computed: {
    multiple() {
      return this.models.selectMode === "1" || this.models.selectMode === 1;
    },
    calOptions() {
      if (this.multiple) {
        return {
          border: false,
          treeConfig: { trigger: "cell" },
          checkboxConfig: { highlight: true },
        };
      }
      return {
        border: false,
        treeConfig: { trigger: "cell" },
        checkboxConfig: { highlight: false },
        radioConfig: { highlight: true },
      };
    },
  },
  watch: {
    value(visible) {
      this[visible ? "show" : "hide"]();
    },
  },
  methods: {
    fetchModelData() {
      return new Promise((rs, rj) => {
        request({
          url: "/commonSelect/getTreeModel",
          method: "post",
          data: { id: this.selectKey, selectMode: this.selectMode },
        })
          .then((r) => {
            this.models = r.models;
            this.treeData = this.handleTree(r.models.treeData);

            this.controlData = r.controlData;
            rs(true);
          })
          .catch((e) => {
            rj(false);
          });
      });
    },
    handleTree(treeData) {
      let arr = [];
      _.each(treeData, (item) => {
        let m = {};
        m.id = item.id;
        m.text = item.text;
        m.type = item.data.type;
        m.parentId = item.data.parentId;
        m.icon = item.icon;
        if (item.children && item.children.length) {
          m.children = this.handleTree(item.children) || [];
        } else {
          m.children = [];
        }
        arr.push(m);
      });
      return arr;
    },
    show() {
      this.fetchModelData().then((r) => {
        this.visible = true;
      });
    },
    hide() {
      this.visible = false;
    },
    cancel() {
      this.$emit("input", false);
      this.$emit("cancel");
    },
    returnResult() {
      let rows = this.$refs["qmTable"].getSelectedRows();
      this.$emit("input", false);
      this.$emit("success", rows);
    },
  },
};
</script>

<style>
</style>